Side sheets Guidelines 側邊彈出層指導規則

Usage  用法

標準側邊欄主要用於平板電腦和桌面裝置等大尺寸視窗,提供一致且可預測的補充介面。

側邊欄內容補充主螢幕內容,並在使用者互動時保持可見。

常見用途包括:

模態側邊欄適用於移動裝置等緊湊視窗。它可顯示標準側邊欄的內容,但需關閉後才能與底層內容互動。

模態側面表格帶篩選控制元件

側邊欄寬度固定,一般會佔滿整個螢幕高度,其具體大小由應用程式的介面佈局決定。

✓ 側邊欄延邊緣放置,通常在右側,稍微內縮16dp
× 請勿將側邊欄從螢幕邊緣縮排超出建議的邊距範圍。這會使側邊欄的位置和滾動行為變得模糊不清,同時也會遮擋主要內容。

Anatomy  結構

1 Divider(optional)2Headline(opaional)3 Sheetcontainer 4Close icon button(optional)
1 Back affordance(optional)2Headline(opaional)3 Sheetcontainer 4Close icon button(optional)

Container 容器

側邊欄容器承載所有元素,大小根據內容自適應。容器為必需元素,其他均為可選。

Close (optional)  關閉(可選)

圖示按鈕可退出側邊欄或切換介面。由於主要內容始終可見,需提供返回主介面的明確操作方式。

Buttons (optional) 按鈕(可選)

按鈕代表側邊欄中可用的操作,可能包括儲存、編輯或下載。使用陰影、填充和色調來突出特定操作。

Divider (optional) 分隔線(可選)

分隔線用於區分不同型別的內容及區域,可用來分隔操作與內容,或使用者生成與系統生成的內容。

Content (optional) 內容(可選)

側邊欄可以顯示各種各樣的內容和佈局,從操作列表到表格佈局中的補充內容。

小螢幕的模態側邊欄可轉換為大螢幕上的標準側邊欄

Responsive layout  響應式佈局

側邊欄有一個基本寬度,但可以按需調整。當你開啟標準側邊欄時,主要內容區域會自動變窄,給側邊欄留出空間,同時保持內容右側的邊距不變。

RTL language support 從右至左語言支援

在從右至左(RTL)語言環境中,側邊欄應出現在視窗的左邊緣,所有元素方向相反。

Behavior 行為

側邊欄可以獨立於介面的其他部分進行垂直滾動。這使得在頁面滾動時,其滾動位置和內容能夠保持不變,反之亦然。側邊欄不能水平滾動。

✓ 當側邊欄的內容超出螢幕高度時,其可在內部垂直滾動
× 避免在側邊欄佈局中出現水平滾動

Back  返回

在安卓系統上,有一種名為預測返回的手勢,允許使用者在側邊欄上向左或向右滑動。

側邊欄從螢幕的頂部和底部邊緣分離,以表明它將關閉。上一螢幕以預覽形式顯示。側邊欄及其內容始終會按照使用者手勢的方向進行縮放。

Interaction & style 互動與樣式

設計規範要求側邊欄內始終要有關閉功能。

✓ 包含關閉功能,以便能關閉側邊欄
× 如果沒有關閉,使用者無法預測側邊欄的關閉和開啟流程,也不知道側邊欄是臨時還是永久的